<template>
    <div class="container-wrap">
        <h1 class="title">请输入新手机号</h1>
        <div class="my-list">
            <div class="line">
                <label for="phone">+86</label>
                <input type="text" name="phone"  maxlength="11" v-model="phone">
                <button class="send-code" @click="sendCode" :disabled="sending">{{btnText}}</button>
            </div>
            <div class="line">
                <label for="code">验证码</label>
                <input type="text" v-model="code" name="code" placeholder="请输入验证码" maxlength="6">
            </div>
        </div>
        <button @click="change" :class="['button', code.length === 6 ? 'active':'save-button']" :disabled="code.length === 6 ?false:true">更&nbsp;&nbsp;换</button>
        <van-toast id="van-toast" />
    </div>
</template>

<script>
    import { GetPhoneSmsCodeOther, ChangeUserMobile } from '@/providers/service'
    export default {
        name: 'my/changePhone2',
        data () {
            return {
                code:'',
                sending:false,
                btnText: '获取验证码',
                time: 60,
            }
        },
        methods: {
            change(){
                this.ChangeUserMobileFn()
            },
            timer () {
                if (this.time > 0) {
                    this.time--
                    this.btnText = this.time + 's后获取'
                    setTimeout(this.timer, 1000)
                } else {
                    this.time = 60
                    this.btnText = '获取验证码'
                    this.sending = false
                }
            },
            sendCode () {
              this.GetPhoneSmsCodeOtherFn()
            },
            async GetPhoneSmsCodeOtherFn(){
                let phone = this.phone
                let reg = /^1[3|4|5|7|8][0-9]{9}$/
                if (phone.length === 0) {
                    this.$toast('您还未输入手机号码，请先输入手机号码后再获取验证码')
                    return false
                } else if (!reg.test(phone)) {
                    this.$toast('不是有效的手机号码')
                    return false
                } else {
                        try{
                            let params = {}
                            params.Mobile = this.phone
                            let res = await GetPhoneSmsCodeOther(params)
                           if(!res){
                               this.$toast('验证码已发送，请查收')
                               this.sending = true
                               this.timer()
                           }
                        }catch(err){
                            console.log(err)
                        }
                }
            },
            async ChangeUserMobileFn(){
                try{
                    let params = {}
                    params.Mobile = this.phone
                    params.UserID = wx.getStorageSync('userInfo').UserID
                    params.SmsCode = this.code
                    let res = await ChangeUserMobile(params)
                    this.$router.push('/pages/my/changePhone3')
                }catch(err){
                    console.log(err)
                }
            }
        },
        mounted () {
            this.code = ""
        },

    }
</script>

<style lang="less" scoped>
    page {
        height: 100%;
        width: 100%;
    }
    .container-wrap{
        width:100%;
        height:100%;

        .title{
            font-size:50rpx;
            margin:78rpx 0rpx 0rpx 46rpx;
        }
        .button{
            width:322rpx;
            height:76rpx;
            line-height:76rpx;
            margin-top:108rpx;
            font-size:36rpx;
            border-radius:0px;
        }
        .save-button{
            color:#333;
            background:#FFF;
            border:1px solid black;
        }
        .active{
            color:#FFF;
            background:#ff9900;
        }


        .my-list{
            margin: 56rpx 40rpx 0rpx 40rpx;
            .line{
                height:60rpx;
                display:flex;
                margin:30rpx 0rpx 0rpx 0rpx;
                border-bottom:3rpx solid #e9e9e9;
                font-size:28rpx;
                font-family: Microsoft YaHei;
                color:#666;
                label{
                    width:100rpx;
                    padding-top:10rpx;
                }

                input{
                    padding: 4rpx 30rpx 0rpx 30rpx;
                    width:300rpx;
                }
                .send-code{
                    position: absolute;
                    float: left;
                    right:50rpx;
                    height: 50rpx;
                    font-size: 24rpx;
                    text-align: center;
                    line-height: 50rpx;
                    color: #333;
                    background-color: #f2f2f2;
                    &::after{
                        border:none
                    }
                }
            }
        }
    }


</style>
